<template>
  <el-col :span="attrs.span">
    <el-row :align="aligin" v-bind="$attrs" :class="attrs.direction">
      <label
        v-if="attrs.label"
        class="text-right"
        :style="{
          width: $attrs.width || 'unset'
        }"
        >{{ attrs.label }}：</label
      >
      <el-col style="flex: 1">
        <slot></slot>
      </el-col>
    </el-row>
  </el-col>
</template>
<script setup>
import { computed, useAttrs } from 'vue'
const attrs = useAttrs()
const aligin = computed(() => {
  return attrs.direction === 'column' ? '' : 'middle'
})
</script>
<style lang="scss" scoped>
label {
  /* font-weight: 300; */
  font-size: 12px;
}
.column {
  flex-direction: column;
}
</style>
